<div class="dashlist" ng-if="ctrl.isInListMode">
  <div class="dashlist-section">
    <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
        {{group.header}}
    </h6>
    <table class="filter-table">
      <thead>
        <tr>
          <th>Node Name</th>
          <th style="width: 20%">Health</th>
          <th>Pods</th>
          <th>%</th>
          <th>CPU requests (cores)</th>
          <th>%</th>
          <th>Memory requests (bytes)</th>
          <th>%</th>
        </tr>
      </thead>
      <tbody>
        <tr class="dashlist-item" ng-repeat="node in ctrl.nodes" ng-click="ctrl.goToNodeDashboard(node, $event)">
          <td>{{node.metadata.name}}</td>
          <td><span ng-if="node.healthState.text !== 'OK'">{{node.healthState.message}}</span><span class="alert-list-item-state {{node.healthState.stateClass}}">
            <i class="{{node.healthState.iconClass}}"></i>
            {{node.healthState.text}}
          </span></td>
          <td>{{(node.podsUsed || '?') + ' / ' + node.status.capacity.pods}}</td>
          <td>{{node.podsUsedPerc || '?%'}}</td>
          <td>{{(node.cpuUsageFormatted || '?') + ' / ' + node.status.capacity.cpu}}</td>
          <td>{{node.cpuUsagePerc || '?%'}}</td>
          <td>{{(node.memUsageFormatted || '?') + ' / ' + node.memCapacityFormatted}}</td>
          <td>{{node.memoryUsagePerc || '?%'}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div ng-if="!ctrl.isInListMode">

  <div class="page-header">
    <h1>{{ctrl.node.metadata.name}}</h1>
    <a href="#" ng-click="ctrl.goToNodeDashboard('All', $event)"><h2><< Back to list</h2></a>
  </div>

  <div class="row">
    <div class="col-md-3">
      <h3 class="page-heading playlist-column-header">Addresses</h3>
      <div class="gf-form" ng-repeat="addr in ctrl.node.status.addresses">
        <span class="muted">
          {{addr.type}}: {{addr.address}}
        </span>
      </div>
    </div>
    <div class="col-md-3">
      <h3 class="page-heading playlist-column-header">Capacity</h3>
      <div class="gf-form" ng-repeat="(k, v) in ctrl.node.status.capacity">
        <span class="muted">
          <span style="text-transform: uppercase;">{{k}}:</span> {{v}}
        </span>
      </div>
    </div>
    <div class="col-md-6">
      <h3 class="page-heading playlist-column-header">Labels</h3>
      <div class="gf-form" ng-repeat="(k, v) in ctrl.node.metadata.labels">
        <span class="label label-tag" style="background-color: rgb(30, 51, 51); border-color: #555555; color: lightgray; font-weight: 300; font-size: 95%;">
          {{k}}: {{v}}
        </span>
      </div>
    </div>
  </div>

  <div class="gf-form-group">
    <h3 class="page-heading">Conditions</h3>
    <table class="grafana-options-table" style="font-size: 90%;">
      <tr class="muted">
        <th>Status</th>
        <th>Type</th>
        <th>Message</th>
        <th>Last Change</th>
      </tr>
      <tr ng-repeat="condition in ctrl.node.status.conditions" class="alert-state-pending">
        <td>
          <i class="icon-gf"
            ng-class="{
              'icon-gf-critical alert-state-critical': !ctrl.isConditionOk(condition),
              'icon-gf-online alert-state-ok': ctrl.isConditionOk(condition)
            }">
          </i>
          {{ctrl.conditionStatus(condition).text}}
        </td>
        <td>{{condition.type}}</td>
        <td>{{condition.message}}</td>
        <td>{{ctrl.conditionLastTransitionTime(condition)}}</td>
      </tr>
    </table>
  </div>
</div>
